
<template>
    <el-table :data="classes">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column label="Actions">
        <template #default="scope">
          <el-button @click="editClass(scope.row)">Edit</el-button>
          <el-button type="danger" @click="deleteClass(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script>
  import axios from 'axios'
  
  export default {
    data() {
      return {
        classes: [],
      }
    },
    async created() {
      const response = await axios.get('/api/classes/')
      this.classes = response.data
    },
    methods: {
      async editClass(cls) {
        // 编辑班级逻辑
      },
      async deleteClass(cls) {
        await axios.delete(`/api/classes/${cls.id}/`)
        this.classes = this.classes.filter(c => c.id !== cls.id)
      },
    },
  }
  </script>